<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Generative Love</title>
  
  
  
      <link rel="stylesheet" href="style.css">

  
</head>

<body>
  <a href="https://mp.weixin.qq.com/s/9V4UORySTqo_AP51jcGNaw" class="hide_buttom"
  style="position: fixed;top: 10%;right: 10px;width: 35px;height: 35px;z-index: 999;background: #696969;border-radius: 50%;padding: 1.0px;text-align: center;color: #ddd;text-decoration: none;   clear: both; line-height: 35px; 	margin:auto;   font-size: 13px;">制作</a>
  <a href="https://mp.weixin.qq.com/s/fq_11AozO7s2A9DrdDT46Q" class="hide_buttom"
  style="position: fixed;top: 4%;right: 10px;width: 35px;height: 35px;z-index: 999;background: #696969;border-radius: 50%;padding: 1.0px;text-align: center;color: #ddd;text-decoration: none;   clear: both; line-height: 35px; 	margin:auto;   font-size: 13px;   ">更多</a>
   
  <css-doodle grid="5">
  :doodle {
    @grid: 10 / 100%; 
  }
  background: @pick(
    #ff0198, #8156a8, #ff6d00, #ff75e4
  );

  transform: translate(
    @rand(-50vw, 50vw),
    @rand(-50vh, 50vh)
  );

  @size: 3.5vmin;
  @shape: heart;
  @place-cell: 50% 50%;

  animation-name: explosion;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-duration: calc(@rand(2s, 5s, .1));
  animation-delay: calc(@rand(-5s, -1s, .1));
  animation-timing-function: 
    cubic-bezier(.84, .02, 1, 1);

  @keyframes explosion {
    0% { opacity: 0; }
    70% { opacity: 1; }
    100% { transform: translate(0, 0); }
  }
</css-doodle>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.5.1/css-doodle.min.js'></script>

  

</body>

</html>
